import React from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './TopBar.module.css';

const TopBar = () => {
  const navigate = useNavigate();
  const username = localStorage.getItem('username') || '管理员';
  
  const handleLogout = () => {
    // 清除用户信息
    localStorage.removeItem('userToken');
    localStorage.removeItem('username');
    // 导航到登录页
    navigate('/login');
  };

  return (
    <div className={styles.topBar}>
      <div className={styles.logo}>
        <span>管理系统</span>
      </div>
      <div className={styles.userMenu}>
        <div className={styles.userInfo}>
          <span>欢迎, {username}</span>
        </div>
        <button className={styles.logoutButton} onClick={handleLogout}>
          退出
        </button>
      </div>
    </div>
  );
};

export default TopBar;